<template>
    <div class="TabView" @click.stop="TabClick">
      <div class="content">
        {{ Title }}
        <div class="icon" @click.stop="RemoveTab">
          <i v-if="closable" style="font-size:20px" class="el-icon-error"></i>
        </div>
      </div>
    </div>
</template>
  
  <script>
  export default {
    name: "TabView",
    props: {
      Title: {
        type: String,
        default: "标签页",
      },
      closable: {
        type: Boolean,
        default: false
      },
      path: {
        type: String,
        default:''
      },
      routePath: {
        type: String,
        default:''
      }
    },
    methods: {
      TabClick() {
        this.$emit("TabClick", {});
      },
      RemoveTab() {
        this.$emit("RemoveTab", {});
      }
    }
  };
  </script>
  
  <style scped>
  .el-icon-error:hover{
    color: red;
  }
  .el-icon-error{
    color: #444;
  }
  .TabView {
    position: relative;
    height: 40px;
    border: 1px solid rgb(212, 212, 212);
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin-right: 10px;
    white-space: nowrap;
  }
  .content {
    display: flex;
  }
  .icon{
    display: none;
  }
  .TabView:hover{
    padding-right: 5px;
    padding-left: 5px;
  }
  .TabView:hover .icon{
    display: block;
  }
  </style>
  